<template>
    <div class="recentCallHistory">
        <!-- 最近呼叫历史 -->
        <div class="recentCallMain">
            <!-- 搜索表单模块 -->
            <el-form
                class="searchForm"
                ref="searchForms"
                :model="searchForm"
                size="small"
                label-width="110px"
                :rules="rules"
            >
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="loginId" label="坐席工号:">
                            <el-input placeholder v-model="searchForm.loginId" name="phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="custcard" label="客户电话:">
                            <el-input placeholder v-model="searchForm.custcard" name="phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item prop="servicename" label="客户姓名:">
                            <el-input placeholder="" v-model="searchForm.servicename" name="phone" style="width: 90%;"></el-input>
                        </el-form-item>
                    </el-col>-->
                    <el-col :span="6">
                        <el-form-item label-position="left" prop="direction" label="呼入类型:">
                            <el-select placeholder="请选择" v-model="searchForm.direction">
                                <el-option
                                    v-for="item in certificatetype"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- <el-col :span="6">
                        <el-form-item prop="certificate" label="证件号:">
                            <el-input placeholder="" v-model="searchForm.certificate" name="phone" style="width: 90%;"></el-input>
                        </el-form-item>
                    </el-col>-->
                    <el-col :span="6">
                        <el-form-item label-position="left" prop="createTimeStart" label="开始时间:">
                            <el-date-picker
                                v-model="searchForm.createTimeStart"
                                type="datetime"
                                placeholder="响铃开始时间"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="startOptions"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label-position="left" prop="createTimeEnd" label="结束时间:">
                            <el-date-picker
                                v-model="searchForm.createTimeEnd"
                                type="datetime"
                                placeholder="响铃结束时间"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="endtOptions"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="lastCol">
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            :loading="searchLoading"
                            @click="handleSearch"
                        >查 询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleReset"
                            :loading="resetLoading"
                        >重 置</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            :loading="searchLoading"
                            @click="handleExport"
                        >导出</el-button>
                        <!-- <el-button type="primary" size="small" icon="el-icon-search" @click="handleReset" >三月前记录</el-button> -->
                    </el-col>
                    <el-col :span="6">
                        <el-button
                            type="cancel"
                            size="small"
                            icon="el-icon-setting"
                            style="float: right;"
                            @click="columnSetting"
                        >列筛选</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- <el-col :span="6" style="margin-right: 3%;">
                        <el-form-item prop="callid" label="来电号码:">
                            <el-input placeholder="" v-model="searchForm.callid" name="phone" style="width: 90%;"></el-input>
                        </el-form-item>
                    </el-col>-->
                </el-row>
            </el-form>
            <div v-if="columnDialogFlag" class="columnDialog" style="padding-bottom:10px;">
                <el-scrollbar wrap-class="side-bar-scrollbar-wrap" style="padding-bottom:10px;">
                    <div v-for="item in tableColumn" :key="item.prop">
                        <el-checkbox v-model="item.flag" @change="changeChecked(item)"></el-checkbox>
                        <span style="font-size: 14px;margin-left: 4px;">{{item.label}}</span>
                    </div>
                </el-scrollbar>
                <!--<div slot="footer" class="dialog-footer">-->
                <!--<el-button @click="columnDialogFlag = false" class="cancelBtn">取 消</el-button>-->
                <!--<el-button type="primary" size="small" @click="handleSubmit" class="submitBtn"size="small" icon="el-icon-circle-check" >确定</el-button>-->
                <!--</div>-->
            </div>
            <!-- 表格数据展示模块 -->
            <el-table :data="tableData" stripe border class="heard-bg">
                <template v-for="(item, index) in tableColumn">
                    <el-table-column :key="index" :label="item.label" v-if="item.flag">
                        <template slot-scope="scope">
                            <span v-if="item.value === 'channelType'">
                                <span>{{ scope.row[item.value] | getChannelType }}</span>
                            </span>
                            <span v-else-if="item.value === 'direction'">
                                <span>{{ scope.row[item.value] === 'In' ? '呼入' : '外呼' }}</span>
                            </span>
                            <span v-else-if="item.value === 'isconnected'">
                                <span>{{ scope.row[item.value] === '1' ? '接起' : '未接起' }}</span>
                            </span>
                            <span v-else-if="item.value === 'sessionType'">
                                <span>
                                    <span>{{ scope.row[item.value] | getSessionType(SessionType) }}</span>
                                </span>
                            </span>
                            <span v-else-if="item.value === 'releaseCause'">
                                <span>
                                    <span>{{ scope.row[item.value] | getReleaseCause }}</span>
                                </span>
                            </span>

                            <span v-else-if="item.value === 'isAllot'">
                                <span>{{ scope.row[item.value] === '1' ? '已分配' : '未分配' }}</span>
                            </span>
                            <span v-else-if="item.value === 'idType'">
                                <span>{{ scope.row[item.value] | getIdType }}</span>
                            </span>
                            <span v-else-if="item.value === 'ringLong'">
                                <span>{{ scope.row[item.value] | getTime }}</span>
                            </span>
                            <span v-else-if="item.value === 'callLong'">
                                <span>{{ scope.row[item.value] | getTime }}</span>
                            </span>
                            <span v-else-if="item.value === 'answerLong'">
                                <span>{{ scope.row[item.value] | getTime }}</span>
                            </span>
                            <span v-else-if="item.value === 'auth'">
                                <span>{{ scope.row[item.value] === '1' ? '通过' : '未通过'}}</span>
                            </span>
                            <span v-else>{{ scope.row[item.value] }}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>

            <Pagination
                :hanleChangeCurrentPage="hanleChangeCurrentPage"
                :handleChangeSize="handleChangeSize"
                :total="total"
                :pageSize="pageSize"
                :currentPage="currentPage"
            />
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import Pagination from '@/components/Pagination/Pagination.vue';
import { closePage, isNull, getDictSelectList } from '@/utils/Common';
import { CHANNELTYPE, RELEASECAUSE, PAPERS_TYPE } from '@/utils/Contants';
import { eachProp } from '@/utils/Object';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

import request from '@/apis/request';

export default {
    name: 'recentCallHistory',
    components: {
        Pagination,
    },
    data() {
        return {
            currentPage: 1, // 当前分页
            pageSize: 10, // 每页数量
            total: 0, // 数据总数
            defaultCardInfo: this.$store.getters.cardInfo_3004, // 信用卡信息 可以用多卡 3004按卡号查询卡资料信息
            certificatetype: [
                {
                    label: '呼入',
                    value: 'In',
                },
                {
                    label: '呼出',
                    value: 'Out',
                },
            ], // 证件类型下拉,
            searchLoading: false, // 查询按钮loading
            resetLoading: false, // 重置按钮loading
            searchForm: { // 搜索表单字段
                loginId: '',
                direction: '',
                createTimeStart: '',
                createTimeEnd: '',
                custcard: '', // 客户电话

            },

            tableColumn: [
                {
                    label: '坐席工号',
                    value: 'loginId',
                    flag: true,
                },
                {
                    label: '渠道类型',
                    value: 'channelType',
                    flag: true,
                },
                {
                    label: '会话方向',
                    value: 'direction',
                    flag: true,
                },
                {
                    label: '电话呼叫时间',
                    value: 'callTime',
                    flag: true,
                },
                {
                    label: '呼叫编号',
                    value: 'contactid',
                    flag: true,
                },
                {
                    label: '是否接起',
                    value: 'isconnected',
                    flag: true,
                },
                {
                    label: '坐席姓名',
                    value: 'agentName',
                    flag: true,
                },
                {
                    label: 'CTI工号',
                    value: 'ctiNo',
                    flag: true,
                },
                {
                    label: '账号/卡号',
                    value: 'acctNo',
                    flag: true,
                },
                {
                    label: '会话类型',
                    value: 'sessionType',
                    flag: true,
                },
                {
                    label: '振铃时长',
                    value: 'ringLong',
                    flag: true,
                },
                {
                    label: '来电原因',
                    value: 'reasonTypeValue',
                    flag: true,
                },
                {
                    label: '来电详因',
                    value: 'reasonValue',
                    flag: true,
                },
                {
                    label: '会话id',
                    value: 'sessionId',
                    flag: false,
                },
                {
                    label: '呼叫或会话唯一标志',
                    value: 'ucid',
                    flag: false,
                },
                {
                    label: '原始呼叫编号',
                    value: 'originalContactid',
                    flag: false,
                },
                {
                    label: '进线技能组',
                    value: 'callGroup',
                    flag: false,
                },
                {
                    label: '来电号码或会话客户ID',
                    value: 'ani',
                    flag: false,
                },
                {
                    label: '被叫号码或微信公众号',
                    value: 'dnis',
                    flag: false,
                },
                {
                    label: '挂断原因',
                    value: 'releaseCause',
                    flag: false,
                },
                {
                    label: '队列开始时间',
                    value: 'acdStartTime',
                    flag: false,
                },
                {
                    label: '队列结束时间',
                    value: 'acdEndTime',
                    flag: false,
                },
                {
                    label: '队列持续时长，单位毫秒',
                    value: 'acdEndTime',
                    flag: false,
                },
                {
                    label: '是否分配给坐席',
                    value: 'isAllot',
                    flag: false,
                },
                {
                    label: '会话开始时间',
                    value: 'answerTime',
                    flag: false,
                },
                {
                    label: '会话挂断时间',
                    value: 'releaseTime',
                    flag: false,
                },
                {
                    label: '会话持续时长',
                    value: 'callLong',
                    flag: false,
                },
                {
                    label: '小结结束时间',
                    value: 'acwLong',
                    flag: false,
                },
                {
                    label: '转接IVR开始时间',
                    value: 'ivrTime',
                    flag: false,
                },
                {
                    label: '应答时长',
                    value: 'answerLong',
                    flag: false,
                },
                {
                    label: 'IVR转回振铃开始时间',
                    value: 'ivrRingTime',
                    flag: false,
                },
                {
                    label: 'IVR转回振铃时长',
                    value: 'ivrRingLong',
                    flag: false,
                },
                {
                    label: '坐席姓名',
                    value: 'agentName',
                    flag: false,
                },
                {
                    label: '分机号',
                    value: 'extno',
                    flag: false,
                },
                {
                    label: '操作员号',
                    value: 'opeNo',
                    flag: false,
                },
                {
                    label: '客户号',
                    value: 'custNo',
                    flag: false,
                },
                {
                    label: '客户名',
                    value: 'custName',
                    flag: false,
                },
                {
                    label: '客户证件类型',
                    value: 'idType',
                    flag: false,
                },
                {
                    label: '客户证件号码',
                    value: 'idNo',
                    flag: false,
                },
                {
                    label: '客户资源码',
                    value: 'custRes',
                    flag: false,
                },
                {
                    label: '原始客户号',
                    value: 'originCustId',
                    flag: false,
                },
                {
                    label: '是否通话身份验证',
                    value: 'auth',
                    flag: false,
                },
                {
                    label: '客户英文名字',
                    value: 'enname',
                    flag: false,
                },
                {
                    label: '客户预留电话',
                    value: 'custHometel',
                    flag: false,
                },
                {
                    label: '客户预留手机',
                    value: 'custPhone',
                    flag: false,
                },
                {
                    label: 'IVR操作轨迹',
                    value: 'ivrOperationTrajectory',
                    flag: false,
                },
            ],
            // 交易类型下拉
            transid: [],
            tableData: [],
            columnDialogFlag: false,
            // 电话渠道
            ChannelType: [],
            SessionType: [], // 会话类型
            rules: {
                createTimeStart: [
                    // { required: true, message: '请选择查询时间', trigger: 'blur' },
                ],
                createTimeEnd: [
                    // { required: true, message: '请选择查询时间', trigger: 'blur' },
                ],
            },
            // 日期限制
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.searchForm.createTimeEnd) {
                        return time.getTime() > new Date(moment(this.searchForm.createTimeEnd).format('YYYY-MM-DD')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.searchForm.createTimeStart) {
                        return time.getTime() < new Date(moment(this.searchForm.createTimeStart).format('YYYY-MM-DD')).getTime();
                    }
                },
            },
        };
    },
    filters: {
        // 渠道类型
        getChannelType(val) {
            if (val) {
                val = val.trim();
                let txt = '';
                CHANNELTYPE.forEach((item) => {
                    if (item.value === val) {
                        txt = item.label;
                    }
                });
                return txt;
            }
            return '';
        },
        // 会话类型
        getSessionType(val, SessionType) {
            if (val) {
                val = val.trim();
                let txt = '';
                SessionType.forEach((item) => {
                    if (item.code === val) {
                        txt = item.label;
                    }
                });
                return txt;
            }
            return '';
        },
        // 挂断原因
        getReleaseCause(val) {
            if (val) {
                val = val.trim();
                let txt = '';
                RELEASECAUSE.forEach((item) => {
                    if (item.value === val) {
                        txt = item.label;
                    }
                });
                return txt;
            }
            return '';
        },
        // 客户证件类型
        getIdType(val) {
            if (val) {
                val = (`${val}`).trim();
                for (let index = 0; index < PAPERS_TYPE.length; index++) {
                    const element = PAPERS_TYPE[index];
                    if (element.value === val) {
                        return element.name;
                    }
                }
            } else {
                return '';
            }
        },
        // 时间转换
        getTime(val) {
            return moment(val).format('mm:ss');
        },
    },
    computed: {

    },
    async mounted() {
        this.handleSearch();
        this.searchForm.direction = 'In';
        // this.ChannelType = await getDictSelectList('')
        this.SessionType = await getDictSelectList('SESSION_TYPE', this);
    },
    methods: {
        // 获取交易类型数据
        // getTransidInfo() {
        //   this.$post.businessStatistics.transfuncDictSelect().then((res) => {
        //     if (res.status === 200) {
        //       this.transid = res.data.content;
        //     }
        //   });
        // },
        // 动态列设置
        columnSetting() {
            this.columnDialogFlag = !this.columnDialogFlag;
        },
        // 选择要展示的列
        changeChecked(val) {
            return !val.flag;
        },
        // 动态列设置保存
        handleSubmit() {
            this.columnDialogFlag = false;
        },
        // 点击查询
        handleSearch() {
            const submitData = JSON.parse(JSON.stringify(this.searchForm));
            const params = {
                ...submitData,
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                bnknbr: getTokenHsbankNo('HsbankNo'),
                idNo: this.defaultCardInfo.CUSTID, // 证件号
                acctNo: this.defaultCardInfo.CARDNO, // 卡号
            };
            if (submitData.direction == 'In') {
                params.ani = this.searchForm.custcard;
            } else if (submitData.direction == 'Out') {
                params.dnis = this.searchForm.custcard;
            }
            // 查询接口
            this.$post.latestAnnouncenment.searchByCall(params).then((res) => {
                // const result = JSON.parse(res.data.content);
                //   console.log(res.data.content);
                this.tableData = res.data.content.callList;
                this.total = res.data.content.callCount;
            });
        },
        // 点击导出 -> 导出流水记录表格
        handleExport() {
            // let tableColumn = this.tableColumn.filter(item => item.flag === true)
            // console.log(tableColumn,'现有表格数据')
            const data = {
                ...this.submitData,
                bnknbr: getTokenHsbankNo('HsbankNo'),
                idNo: this.defaultCardInfo.CUSTID, // 证件号
                acctNo: this.defaultCardInfo.CARDNO, // 卡号
            };
            // console.log(data)
            let url = '/iccsrv/call/downloadCallHistory?';
            eachProp(data, (prop) => {
                if (!isNull(data[prop])) {
                    url += `${prop}=${data[prop].toString()}&`;
                }
            });
            url = url.substring(0, url.length - 1);
            request({
                url,
                method: 'get',
                responseType: 'blob',
            }).then((res) => {
                // console.log(res, '相应报文')
                const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                const a = document.createElement('a');
                a.style.display = 'none';
                a.download = `recentCallHistory${new Date().getTime()}.xls`;
                a.href = blobUrl;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        },
        // 点击重置搜索表单
        handleReset() {
            this.$refs.searchForms.resetFields();
            this.currentPage = 1;
            this.handleSearch();
        },

        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 2);
        },

        // 切换分页大小
        handleChangeSize(val) {
            this.pageSize = val;
            this.currentPage = 1;
            this.handleSearch();
        },

        // 切换页码
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.handleSearch();
        },
    },
};
</script>
<style lang="scss">
.recentCallMain {
    width: 100%;
    background: #fff;
    margin-bottom: 15px;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
    .footer {
        text-align: center;
        margin-bottom: 16px;
    }
    .columnDialog {
        width: 200px;
        z-index: 2;
        padding: 12px;
        background: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
        -moz-box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
        box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
        position: absolute;
        right: 20px;
        top: 120px;
        .dialog-footer {
            margin-top: 12px;
        }
        /deep/ .side-bar-scrollbar-wrap {
            max-height: 600px;
            min-height: 300px;
        }
    }
    .searchForm {
        margin-bottom: 30px;
        .el-input,
        .el-select,
        .el-date-editor {
            width: 100%;
            /* max-width: 200px; */
        }
        .lastCol {
            text-align: center;
        }
    }
    .pagination {
        margin-top: 20px;
        text-align: right;
    }
}
</style>
